<template>
  <div>
    <!-- 第一行 -->
    <a-row>
      <a-col :span="12">
        <!-- 上级部门 -->
        <span class="name">上级部门</span>
        <a-select
          showSearch
          placeholder="请选择上级部门"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="tom">Tom</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="12">
        <a-form :form="form">
          <a-form-item
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
            label="登录手机号"
          >
            <a-input
             style="width:220px"
              v-decorator="[
                'username',
                {rules: [{ required: true, message: '请输入正确的手机号' }]}
              ]"
              placeholder="请输入员工手机号作为登录账号"
            />
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <!-- 第二行 -->
    <a-row style="margin-bottom:35px">
      <a-col :span="12">
        <!-- 上级部门 -->
        <span class="name">账号角色</span>
        <a-select
          showSearch
          placeholder="请选择所属角色"
          optionFilterProp="children"
          style="width: 200px"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
          :filterOption="filterOption"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="tom">Tom</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="12">
       <span class="name">密码</span>
        <a-input
          style="width:220px"
          placeholder="请输入员工登录密码（6-16字符）"
        />
      </a-col>
    </a-row>
    <!-- 第三行 -->
    <a-row>
      <a-col :span="12">
        <!-- 上级部门 -->
        <span class="name">员工姓名</span>
        <a-input
          style="width:200px"
          placeholder="请输入员工姓名（12字以内）"
        />
      </a-col>
      <a-col :span="12">
       <span class="name">确认密码</span>
        <a-input
          style="width:220px"
          placeholder="请再次输入员工登录密码"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 16, offset: 1 },
};
export default {
  data () {
    return {
      checkNick: false,
      formItemLayout,
      form: this.$form.createForm(this),
    }
  }
}

</script>
<style lang="less" scoped>
.name {
  display: inline-block;
  width: 112px;
  color: #333333;
  font-size: 14px;
  // padding-right: 20px;
  // box-sizing: border-box;
}
</style>